<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>T-Box下发</title>
  <!-- import CSS -->
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
</head>
<body>
  <div id="app">
    <div style="width: 1200px;margin: 0 auto">
      <h2>版本升级</h2>
      <el-form :model="data1" label-width="100px" class="demo-ruleForm">
        <el-form-item label="vin：">
          <el-input v-model="data1.vin"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="requestModel_1">确定</el-button>
        </el-form-item>
      </el-form>
      <h2>参数设置</h2>
      <el-form :model="data2" label-width="400px" class="demo-ruleForm">
        <el-form-item label="vin：">
          <el-input v-model="data2.vin"></el-input>
        </el-form-item>
        <el-row type="flex" class="row-bg">
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item
              v-for="(param, index) in data2.params"
              v-if="index < 8"
              :label="param.name">
              <el-input v-model="param.value" placeholder="value"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <el-form-item
              v-for="(param, index) in data2.params"
              v-if="index > 7"
              :label="param.name">
              <el-input v-model="param.value" placeholder="value"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="requestModel_2">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>

    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          data1:{
            vin:'' //89860318940211808
          },
          data2:{
            vin:'',
            params:[{
              key:'1',
              name:'终端本地存储周期（0ms - 60000ms）',
              value:''
            },{
              key:'2',
              name:"信息上报周期（1s - 600s）",
              value:''
            },{
              key:'3',
              name:"信息上报周期(报警时)（0ms - 60000ms）",
              value:''
            },{
              key:'4',
              name:"远程服务与管理平台域名长度",
              value:''
            },{
              key:'5',
              value:'',
              name:"远程服务与管理平台域名",
              type:"string"
            },{
              key:'6',
              name:"远程服务与管理平台端口（0-65531）",
              value:''
            },{
              key:'7',
              name:"硬件版本",
              value:'',
              type:"string"
            },{
              key:'8',
              name:"固件版本",
              value:'',
              type:"string"
            },{
              key:'9',
              name:"终端心跳周期（1s - 240s）",
              value:''
            },{
              key:'10',
              name:"终端应答超时时间（1s - 600s）",
              value:''
            },{
              key:'11',
              name:"平台应答超时时间（1s - 600s）",
              value:''
            },{
              key:'12',
              name:"连续三次登入失败至下一次登入间隔（1min - 240min）",
              value:''
            },{
              key:'13',
              name:"公共平台域名长度",
              value:''
            },{
              key:'14',
              name:"公共平台域名",
              value:'',
              type:"string"
            },{
              key:'15',
              name:"公共平台端口（0-65531）",
              value:''
            },{
              key:'16',
              name:"是否处于抽样检测",
              value:''
            }]
          },
        }
      },
      mounted:function(){

      },
      methods: {
        removeDomain:function(item) {
          var index = this.data2.params.indexOf(item)
          if (index !== -1) {
            this.data2.params.splice(index, 1)
          }
        },
        addDomain:function() {
          this.data2.params.push({
            key: '',
            value: ''
          });
        },
        // 版本升级
        requestModel_1:function(){
          var data = {
            vin:this.data1.vin
          }
          this.$http.post('http://39.104.84.146/upgrade/rest/version/upgrade',data,{
            withCredentials: true
          })
          .then(function(response){
              console.log(response.body)
              this.$message(response.body.info);
          },function(res){
            alert(res.body)
          }) 
        },
        // 参数设置
        requestModel_2:function(){
          var params = {};
          var flag = true;
          _.map(this.data2.params,function(item){
            if(item.type == "string"){
              params[item.key] = item.value
            }else{
              params[item.key] = Number(item.value)
              // if(!Number(item.value)){
              //   setTimeout(function(){
              //     vm.$notify({
              //       title: '警告',
              //       message: "params"+item.key+"格式错误",
              //       type: 'warning'
              //     });
              //   }, 0); 
              //   flag = false  
              // }else{
              //   params[item.key] = Number(item.value)
              // }
            }
          });
          var data = {
            vin:this.data2.vin,
            params:params
          }
          if(!flag)return
          this.$http.post('http://39.104.84.146/upgrade/rest/param/set',data,{
            withCredentials: true
          })
          .then(function(response){
              console.log(response.body)
              this.$message(response.body.info);
          },function(res){
            alert(res.body)
          })
        }

      }
    })
  </script>
</html>